<template> 
  	 <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  >
	 		<a-form :layout="formLayout"  :form="form" >
			    <a-form-item
			        label="产品名称"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			           {{baseform.name}}
			    </a-form-item>  
				<a-form-item
			        label="产品类型"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      > 
					  {{baseform.type | productType}}
			      </a-form-item>
			      <a-form-item
			        label="产品规模（万元）"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >   	
			      	  {{baseform.size}} 
			      </a-form-item>
			      <a-form-item
			        label="融资主体性质"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.financingSubjectNature | financingSubjectNature}} 
			      </a-form-item>

			    <a-form-item
			        label="起投额（万元）"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      > 
			           {{baseform.startingAmt}} 
			      </a-form-item>
			      <a-form-item
			        label="存续周期（月）"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.subsistingCycle}}  
			      </a-form-item>
			      <a-form-item
			        label="兑付方式"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.cash | duifuWay}}  
			      </a-form-item>
			      
			      <a-form-item
			        label="发行方"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.issuer}}  
			      </a-form-item>
			      <a-form-item
			        label="增信方"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.increasingCredit}}   
			      </a-form-item>
			      <a-form-item
			        label="增信方式"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		
			      		<span  v-if='baseform.increasingCreditMode!=5'>{{baseform.increasingCreditMode | increasingCreditMode}}</span>
			      		<span  v-else>{{baseform.increasingCreditModeValue}}</span>
			      </a-form-item>
			      <a-form-item
			        label="承销方"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      	  {{baseform.underwriter}}   
			      </a-form-item>
			      
			      <a-form-item
			        label="产品发行时间"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		{{baseform.releaseTime  |  formatDates}}  
			      </a-form-item>
			      <a-form-item
					label="产品结构图"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				> 
					<div  class='mt20'  v-if='baseform.imageList && baseform.imageList.length>0'>
	  					 <img  :src='imgsrc' style="max-width: 100%">
	  				</div>
				</a-form-item>
				<a-form-item
			        label="产品亮点"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		<span  v-html='baseform.highlight'  class='word-break-all'></span>
			      </a-form-item>
			      <a-form-item
			        label="收益描述"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		<span  v-html='baseform.benefitDescription'  class='word-break-all'></span>
			      </a-form-item>
			      <a-form-item
			        label="产品标签"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >  
			      	 <ul  class='productTag' style="margin-bottom: 0"  v-if='baseform.tag!=""'>
			      	 	<li  v-for='(item,index) in productTagdata' :key='index' ><button type="button"  class='active'>{{item}}</button></li>
			      	 </ul> 
			      </a-form-item>
			      <a-form-item
			        label="产品发行进度"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      > 
			           <span  v-html='baseform.issueProgress'  class='word-break-all'></span> 
			      </a-form-item>
			      <a-form-item
			        label="产品Q&A"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >		 
			      		<ul  style="margin-bottom: 0"> 
			      			<li  v-for='(item,index) in baseform.faqList'  :key='index'   class='relative'>Q：{{item.question}}  
			      			<span  style='color: red'>A：{{item.answer}}</span>   
			      			</li>
			      		</ul> 
			      </a-form-item>
			      <a-form-item
			        label="是否为推荐产品"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      	<span  v-if='baseform.isRecommend=="1"'>是</span>
			      	<span  v-if='baseform.isRecommend=="0"'>否</span> 
			      </a-form-item>
			      <a-form-item
			        label="可见用户组"
			        :label-col="formItemLayout.labelCol"
			        :wrapper-col="formItemLayout.wrapperCol"
			      >
			      		<!-- value绑定值不能更改 -->
			           <a-checkbox-group :options="plainOptions"  :value='roleList' />
			      </a-form-item>

				<a-form-item
					label="相关资料"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				>
					<ul>
						<li  v-for='item  in  baseform.fileVOList'><a-icon type="paper-clip" />
						   {{item.name}}    <span  class='fr'  title='下载'><a-icon type="download"  @click='downloadFile(item.code)'  /></span>
						</li>
					</ul> 
				</a-form-item> 
	    	</a-form> 
	 </a-spin> 
</template>

<script>
import { RoleList }  from  '@/api/system/index'
import  { DetailProduct }  from  '@/api/product/index' 
export default {
  name: 'productInfo',
  data () {
    return {
    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
    	spinning:false,
    	formLayout:'horizontal',
    	plainOptions:[],/*角色option 多选框*/ 
 		roleList:[],
 		productTagdata:[], 
 		imgsrc:process.env.BASE_API+'/op/fileupload/download_file?token='+sessionStorage.getItem('tokenId')+'&fileCode=',//结构图

    	baseform:{ },                                             
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
  	this.code = this.$route.query.code
    this.pageInit()
  },
  methods:{
  	 pageInit(){
  	 	this.spinning = true
  	 	let role = new Promise((resolve,reject)=>{
  	 		RoleList({pageSize:100}).then((res)=>{
  	 			if(res.data.flag == true){
  	 				resolve(res.data.dataList)
  	 			}
  	 			else{
  	 				reject()
  	 			}
  	 		})
  	 	})
  	 	let detail = new Promise((resolve,reject)=>{
  	 		DetailProduct(this.code).then((res)=>{
  	 			if(res.data.flag == true){
  	 				resolve(res.data.data)
  	 			}
  	 			else{
  	 				reject()
  	 			}
  	 		})
  	 	})
  	 	Promise.all([role,detail]).then((res)=>{
  	 		/*option列表**/
  	 		this.plainOptions = res[0].map((item)=>{
  	 			return {
  	 				label:item.name,
  					value:item.code
  	 			}
  	 		})

  	 		this.baseform = res[1]
  	 		/*角色信息回填*/ 
			this.roleList = this.Recontent_fromcode(res[1].roleList) 
			/*''=>['']*/
			this.productTagdata =  this.baseform.tag.slice(0,-1).split(',') 
			//返回流程图
			if(this.baseform.imageList && this.baseform.imageList.length>0){
				this.imgsrc+=this.baseform.imageList[0].code
			}

			this.spinning =false
  	 	}).catch((error) => { 
		  console.log(error)      // 失败了，打出 '失败'
		})  
    }, 
  },
  computed: {
		formItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
			wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
			} : {};
		}, 
		
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.productTag li{display: inline-block;margin-right: 10px;}
.productTag li>button{height: 32px;line-height: 32px;background-color: #fff;border:1px solid #ccc;border-radius: 19px;padding:0 15px;outline: none;} 
.productTag li>button.active{border-color:#1890ff;color:#1890ff;}
</style>
